<template>
<div class="page-wrapper">
    <div class="page-wrapper__body">
        <div class="page-container">
            <div class="grid-container">
                <el-row class="grid-table-tool">
                    <el-col :span="12" class="tool-action">
                        <el-input v-model="filterText" prefix-icon="el-icon-search" placeholder="输入关键字进行过滤" style="width:400px;">
                        </el-input>
                        <!--<el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>-->
                    </el-col>
                    <el-col :span="12" class="tool-pagination">
                        <!--<el-button type="primary" plain icon="el-icon-plus" @click="onAdd(null)">新增</el-button>-->
                    </el-col>
                </el-row>
                <el-tree :data="resp.dataList" default-expand-all node-key="id"
                        ref="treeFilter" class="filter-tree" :filter-node-method="filterNode">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ data.title }}</span>
                      <span>
                          <el-button type="text" size="mini" @click.stop="() => onAdd(data)" v-if="!data.isInit">添加子级</el-button>
                          <el-button type="text" size="mini" @click.stop="() => onEdit(data)">编辑</el-button>
                          <el-popover placement="top" width="160" v-model="data.deleteVisible" v-if="!data.isInit">
                              <p style="line-height: 30px;">确认删除？</p>
                              <div style="text-align: right; margin: 0">
                                  <el-button size="mini" round type="text" @click="data.deleteVisible = false">取消</el-button>
                                  <el-button type="primary" round size="mini" @click="remove(data)">确定</el-button>
                              </div>
                              <el-button slot="reference" type="text" size="mini" style="margin-left:7px;">删除</el-button>
                          </el-popover>
                        </span>
                    </span>
                </el-tree>
                <el-dialog title="菜单项" :visible.sync="dialogFormVisible">
                    <el-form :model="menuForm" :rules="rules" v-loading="isFormLoading" ref="menuForm" label-position="top">
                        <el-form-item v-if="menuForm.parentCode > 0">
                            <strong>上级菜单:</strong> {{menuForm.parentTitle}}
                        </el-form-item>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="菜单标题" prop="title" required>
                                    <el-input v-model="menuForm.title" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="!menuForm.isInit">
                                <el-form-item label="是否显示菜单" prop="isHidden">
                                    <el-select v-model="menuForm.isHidden" style="width:100%">
                                        <el-option label="隐藏" :value="true"></el-option>
                                        <el-option label="显示" :value="false"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="菜单图标">
                                    <el-input v-model="menuForm.iconCls" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="!menuForm.isInit">
                                <el-form-item label="是否缓存" prop="noCache">
                                    <el-select v-model="menuForm.noCache" style="width:100%">
                                        <el-option label="是" :value="true"></el-option>
                                        <el-option label="否" :value="false"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="!menuForm.isInit">
                                <el-form-item label="菜单路由名称" prop="name">
                                    <el-input v-model="menuForm.name" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="!menuForm.isInit">
                                <el-form-item label="组件路径" prop="component">
                                    <el-input v-model="menuForm.component" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="!menuForm.isInit">
                                <el-form-item label="跳转路由" prop="path" required>
                                    <el-input v-model="menuForm.path" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="!menuForm.isInit">
                                <el-form-item label="重定向路由" prop="redirect">
                                    <el-input v-model="menuForm.redirect" clearable></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="排序">
                            <el-input-number v-model="menuForm.showOrder" :min="1" controls-position="right" style="width:100%;"></el-input-number>
                            <div class="default_tips">越小越靠前</div>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="menuForm.remark" type="textarea" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="onSave()">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    import {findList, save, deleted} from "../../api/adminMenu";

    const MMenu = {
      id: null, title: '', iconCls: '', noCache: false,
      path: '', component: '', name: '', redirect: '',
      prefix: '', isHidden: false,
      parentCode: 0, parentTitle: '无', level: 1,
      remark: ''
    };
    export default {
        data() {
          return {
            resp: {
              dataList: [],
            },
            rawDataList: [],
            filterText: '',
            menuForm: this.baseUtil.modelCopy(MMenu),
            dialogFormVisible: false,
            isFormLoading: false,
            rules: {
              title: [{required: true, message: '请输入菜单标题', trigger: ['blur', 'change']}],
              path: [{required: true, message: '请输入菜单路由', trigger: ['blur', 'change']}],
              name: [{required: true, message: '请输入菜单路由名称', trigger: ['blur', 'change']}],
              // component: [{required: true, message: '请输入组件路径', trigger: ['blur', 'change']}],
            },
          }
        },
        watch: {
            filterText(val) {
                this.$refs.treeFilter.filter(val);
            }
        },
        methods: {
            //查询
            filterNode(value, data) {
                if (!value) return true;
                return data.title.indexOf(value) !== -1;
            },
            //新增节点
            onAdd(parent) {
                this.dialogFormVisible = true;
                this.$nextTick(() => {
                    this.$refs['menuForm'].resetFields();
                  let form = this.baseUtil.modelCopy(MMenu)
                  if (parent != null) {
                    form.parentCode = parent.code;
                    form.level = parent.level + 1;
                    form.parentTitle = parent.title
                  }
                  this.menuForm = form;
                })
            },
            //编辑节点
            onEdit(node) {
                let parent = this.rawDataList.filter(m => m.id == node.parentCode);
                this.menuForm = this.baseUtil.modelCopy(node);
                this.menuForm.parentTitle = parent.length > 0 ? parent[0].title : '';
                this.dialogFormVisible = true;
            },
            //删除节点
            async remove(data) {
                if(data.isLeaf == null || data.isLeaf == 0){
                    this.$message({type: 'warning', message: '当前节点下还有子节点，无法删除!', showClose: true});
                    data.deleteVisible = false;
                    return false;
                }
                let resp = await deleted(data.id);
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '删除失败!', showClose: true});
                    return false;
                }
                this.$message({type: 'success', message: '删除成功!', showClose: true});
                this.loadData();

            },
            //保存
            onSave() {
                this.isFormLoading = true;
                this.$refs['menuForm'].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible = false;
                        this.handleSave();
                    } else {
                        this.isFormLoading = false;
                        return false;
                    }
                });
            },
            async handleSave() {
                let data = {adminMenu: this.menuForm};
                let resp = await save(data);
                this.isFormLoading = false;
                if (!this.qUtil.validResp(resp)) {
                    this.$message.error("保存失败!");
                    return;
                }
                this.$message.success("保存成功!");
                this.dialogVisible = false;
                this.loadData();
            },

            //加载数据
            async loadData() {
                this.isLoading = true;
                let resp = await findList();
                if (this.qUtil.validResp(resp)) {
                    let list = resp.data.dataList;
                    if (list != null && list.length > 0) {
                        this.resp.dataList = resp.data.dataList;
                        this.rawDataList = this.baseUtil.modelCopy(list);
                    }
                }
                this.isLoading = false;
            },
            handleDataList(data, list) {
                list.map(m => {
                    m.children = data.filter(d => d.parentCode == m.id);
                    if (m.children.length > 0) {
                        this.handleDataList(data, m.children);
                    }
                });
            },
        },

        mounted() {
            this.loadData();
        }
    }
</script>
<style>
    .el-tree{
        border:1px solid #f1f1f1;
    }
    .el-tree-node__content{
        padding:20px 0;
        border-bottom:1px solid #f5f5f5;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>